<template>
  <div class="second-step-container">
    <div class="second-step-content">
      <div class="wechat-authorization-section">
        <div class="skip-button-container">
          <button class="skip-btn" @click="onSkip">上一步</button>
          <button class="skip-btn" @click="onSkip">跳过</button>
        </div>
        <div>
          <img
            :src="$serverImgUrl + 'back2.png'"
            class="section-image"
          />
        </div>
        <div style="margin-left: 30px">
          <h1 class="section-title">
            <span class="primary-color" style="padding-left: 20px"
              >公众号授权</span
            >
            邀请 <br />即刻操作即可使用~
          </h1>
          <p class="section-description">
            温馨提示：当前功能需先完成公众号授权才能启用哦～ <br />
            只需简单几步完成授权，就能立即解锁使用，快动手操作吧～
          </p>
          <div class="authorization-hint">
            <el-button
              class="custom-btn none-radius"
              @click="handleAuthorizationClick"
              >点击授权我的微官网</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入二维码生成组件
import QrcodeGenerator from "@/components/public/QrcodeGenerrator.vue";
export default {
  name: "WechatAuthorization",
  props: {
    qrcodeImage: {
      type: String,
      default: require("@/assets/template/qrcode_example.png"),
    },
  },
  components: {
    QrcodeGenerator,
  },
  data() {
    return {
      // 自定义二维码配置
      customQrcodeConfig: {
        content: "https://example.com/payment-confirm", // 二维码内容
        size: 200, //二维码大小
        foregroundColor: "#333333", //二维码颜色
        backgroundColor: "#ffffff", //二维码背景颜色
        errorCorrectionLevel: "M", //二维码错误 correction level
      },
      // 状态消息
      statusMessage: "",
      statusType: "success",
    };
  },
  methods: {
    // 处理二维码生成成功事件
    handleQrcodeGenerated(canvas) {
      this.statusMessage = "二维码生成成功";
      this.statusType = "success";
      // 3秒后自动隐藏提示
      setTimeout(() => {
        this.statusMessage = "";
      }, 3000);
    },
    // 处理二维码生成错误事件
    handleQrcodeError(error) {
      this.statusMessage = `二维码生成失败: ${error.message}`;
      this.statusType = "error";
    },
    // 处理授权点击事件
    handleAuthorizationClick() {
      // 打开新窗口显示二维码
      window.open("http://wxz.vpig.com.cn/api/wx/go_auth", "_blank");
    },
    onSkip() {
      this.$emit("skip");
    },
  },
};
</script>

<style scoped>
.second-step-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.second-step-content {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skip-button-container {
  position: absolute;
  top: 32px;
  right: 50px;
  width: 89%;
  display: flex;
  justify-content: space-between;
}

.skip-btn {
  background-color: transparent;
  color: #348cf8;
  border: 1px solid #348cf8;
  padding: 6px 20px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.skip-btn:hover {
  background-color: #348cf8;
  color: white;
}

.wechat-authorization-section {
  padding: 20px 80px;
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.6);
  box-sizing: border-box;
  /* 纯白 */
  border: 1px solid #ffffff;
  backdrop-filter: blur(40px);
  border-radius: 20px;
}
.section-image {
  max-height: 400px;
}
.section-title {
  /* font-size: 18px; */
  color: #333;
  margin-bottom: 20px;
}
.section-description {
  font-family: Source Han Sans;
  font-size: 15px;
  font-weight: 500;
  line-height: 26px;
  text-align: center;
  letter-spacing: 0em;
  font-variation-settings: "opsz" auto;
  font-feature-settings: "kern" on;
  color: #001d44;
}
.authorization-hint {
  margin-top: 42px;
  margin-left: 32px;
}

.registration-link {
  padding-left: 25px;
}

.link-text {
  font-size: 14px;
  color: #348cf8;
  text-decoration: none;
}

.link-text:hover {
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .skip-button-container {
    position: static;
    margin-bottom: 20px;
    width: 100%;
    text-align: right;
  }

  .qrcode-frame {
    width: 100%;
    max-width: 380px;
  }
}
</style>
